<template>
  <el-row v-if="dataCount.roleId != 106">
    <el-row :gutter="20" class="panel-group" v-if="dataCount.userType <= 1 ">
      <el-col :xs="10" :sm="10" :lg="4" style="width:33%" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('allVisitis')">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">用户量</div>
            <count-to :start-val="0" :end-val="dataCount.userAllCount*99" :duration="2600" class="card-panel-num" />
            <div style="font-size: 13px;">{{'今日新增：1'+ dataCount.userNewCount*99}}</div>
          </div>
        </div>
      </el-col>

<!--      <el-col :xs="10" :sm="10" :lg="4" style="width:25%" class="card-panel-col">-->
<!--        <div class="card-panel" @click="handleSetLineChartData('todayOrder')">-->
<!--          <div class="card-panel-icon-wrapper icon-people">-->
<!--            <svg-icon icon-class="shopping" class-name="card-panel-icon" />-->
<!--          </div>-->
<!--          <div class="card-panel-description">-->
<!--            <div class="card-panel-text">今日订单数</div>-->
<!--            <count-to :start-val="0" :end-val="dataCount.orderTodayCount" :duration="2600" class="card-panel-num" />-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-col>-->

      <el-col :xs="10" :sm="10" :lg="4" style="width:33%;height: 70%" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('todayMoney')">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">今日交易金额</div>
            <count-to :start-val="0" :end-val="dataCount.todayMoney*99" :duration="3200" class="card-panel-num" />
          </div>
        </div>
      </el-col>

<!--      <el-col :xs="10" :sm="10" :lg="4" style="width:20%" class="card-panel-col">-->
<!--        <div class="card-panel" @click="handleSetLineChartData('commonInfo')">-->
<!--          <div class="card-panel-icon-wrapper icon-message">-->
<!--            <svg-icon icon-class="message" class-name="card-panel-icon" />-->
<!--          </div>-->
<!--          <div class="card-panel-description">-->
<!--            <div class="card-panel-text">跳蚤信息数</div>-->
<!--            <count-to :start-val="0" :end-val="dataCount.fleaCount" :duration="3000" class="card-panel-num" />-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-col>-->
      <el-col :xs="12" :sm="12" :lg="4" style="width:33%" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('repairCount')">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="question" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">本月报修量</div>
            <count-to :start-val="0" :end-val="dataCount.repairCount*99" :duration="3200" class="card-panel-num" />
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="panel-group" v-if="dataCount.userType == 2">
      <el-col :xs="10" :sm="10" :lg="4" style="width:20%" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('todayOrder')">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="shopping" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">今日订单数</div>
            <count-to :start-val="0" :end-val="dataCount.orderTodayCount*99" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="10" :sm="10" :lg="4" style="width:20%" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('todayMoney')">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">今日交易金额</div>
            <count-to :start-val="0" :end-val="dataCount.todayMoney*99" :duration="3200" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="10" :sm="10" :lg="4" style="width:20%" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('todayMoney')">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">今日分润</div>
            <count-to :start-val="0" :end-val="dataCount.todayFenRun*99" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="10" :sm="10" :lg="4" style="width:20%" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('commonInfo')">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="message" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">跳蚤信息数</div>
            <count-to :start-val="0" :end-val="dataCount.fleaCount*99" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="4" style="width:20%" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('repairCount')">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="question" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">本月报修量</div>
            <count-to :start-val="0" :end-val="dataCount.repairCount*99" :duration="3200" class="card-panel-num" />
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="panel-group" v-if="dataCount.userType == 3">
      <el-col :xs="10" :sm="10" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('todayOrder')">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="shopping" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">今日订单数</div>
            <count-to :start-val="0" :end-val="dataCount.orderTodayCount" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="10" :sm="10" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('todayMoney')">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">今日交易金额</div>
            <count-to :start-val="0" :end-val="dataCount.todayMoney" :duration="3200" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="10" :sm="10" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('commonInfo')">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="message" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">跳蚤信息数</div>
            <count-to :start-val="0" :end-val="dataCount.fleaCount" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('repairCount')">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="question" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">本月报修量</div>
            <count-to :start-val="0" :end-val="dataCount.repairCount" :duration="3200" class="card-panel-num" />
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="panel-group" v-if="dataCount.userType == 4">
      <el-col :xs="10" :sm="10" :lg="12" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('todayOrder')">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="shopping" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">今日订单数</div>
            <count-to :start-val="0" :end-val="dataCount.orderTodayCount" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="10" :sm="10" :lg="12" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('todayMoney')">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">今日交易金额</div>
            <count-to :start-val="0" :end-val="dataCount.todayMoney" :duration="3200" class="card-panel-num" />
          </div>
        </div>
      </el-col>
<!--      <el-col :xs="10" :sm="10" :lg="4" style="width:20%" class="card-panel-col">-->
<!--        <div class="card-panel" @click="handleSetLineChartData('todayMoney')">-->
<!--          <div class="card-panel-icon-wrapper icon-people">-->
<!--            <svg-icon icon-class="money" class-name="card-panel-icon" />-->
<!--          </div>-->
<!--          <div class="card-panel-description">-->
<!--            <div class="card-panel-text">今日分润</div>-->
<!--            <count-to :start-val="0" :end-val="dataCount.todayFenRun" :duration="2600" class="card-panel-num" />-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :xs="10" :sm="10" :lg="4" style="width:20%" class="card-panel-col">-->
<!--        <div class="card-panel" @click="handleSetLineChartData('commonInfo')">-->
<!--          <div class="card-panel-icon-wrapper icon-message">-->
<!--            <svg-icon icon-class="message" class-name="card-panel-icon" />-->
<!--          </div>-->
<!--          <div class="card-panel-description">-->
<!--            <div class="card-panel-text">跳蚤信息数</div>-->
<!--            <count-to :start-val="0" :end-val="dataCount.fleaCount" :duration="3000" class="card-panel-num" />-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :xs="12" :sm="12" :lg="4" style="width:20%" class="card-panel-col">-->
<!--        <div class="card-panel" @click="handleSetLineChartData('repairCount')">-->
<!--          <div class="card-panel-icon-wrapper icon-money">-->
<!--            <svg-icon icon-class="question" class-name="card-panel-icon" />-->
<!--          </div>-->
<!--          <div class="card-panel-description">-->
<!--            <div class="card-panel-text">本月报修量</div>-->
<!--            <count-to :start-val="0" :end-val="dataCount.repairCount" :duration="3200" class="card-panel-num" />-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-col>-->
    </el-row>

    <el-row :gutter="20">
      <el-col style="width: 33%;height: 700px">

        <div class="chart-wrapper">
          <p style="margin-left: 25px;margin-top: 0px;font-size:25px">常用功能</p>
          <hr style="margin-top: -10px">
          <div style=" width: auto;height: 85%">
            <el-row class="panel-group1">

              <el-col :span="7" class="waibiankuang">
                <div class="card-panel-icon-wrapper icon-money"   @click="handleSetLineChartData('jiaofei')">
                  <svg-icon icon-class="money" class-name="card-panel-icon" />
                  <p class="font-cool">交费统计</p>
                </div>
              </el-col>
              <el-col :span="7" class="waibiankuang">
                <div class="card-panel-icon-wrapper icon-money"  @click="handleSetLineChartData('xianxia')">
                  <svg-icon icon-class="build" class-name="card-panel-icon" />
                  <p class="font-cool">线下缴费</p>
                </div>
              </el-col>
              <el-col :span="7" class="waibiankuang">
                <div class="card-panel-icon-wrapper icon-money"  @click="handleSetLineChartData('tongzhi')">
                  <svg-icon icon-class="documentation" class-name="card-panel-icon" />
                  <p class="font-cool">通知公告</p>
                </div>
              </el-col>
            </el-row>
            <el-row  class="panel-group1">
              <el-col :span="7" class="waibiankuang">
                <div class="card-panel-icon-wrapper icon-money"  @click="handleSetLineChartData('lvhua')">
                  <svg-icon icon-class="international" class-name="card-panel-icon" />
                  <p class="font-cool">绿化保洁</p>
                </div>
              </el-col>
              <el-col :span="7" class="waibiankuang">
                <div class="card-panel-icon-wrapper icon-money"  @click="handleSetLineChartData('xunjian')">
                  <svg-icon icon-class="post" class-name="card-panel-icon" />
                  <p class="font-cool">维修巡检</p>
                </div>
              </el-col>
              <el-col :span="7" class="waibiankuang">
                <div class="card-panel-icon-wrapper icon-money"  @click="handleSetLineChartData('baoxiu')">
                  <svg-icon icon-class="dashboard" class-name="card-panel-icon" />
                  <p class="font-cool">报事报修</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <!--数据统计-->
      <el-col style="width: 66%">
        <div class="chart-wrapper">
          <p style="margin-left: 25px;margin-top: 0px;font-size:25px">数据统计</p>
          <hr style="margin-top: -10px">
          <!--数据统计表格-->
          <!--表格上半部分-->
          <el-row class="topAll">
            <!--表格左上 小区信息等-->
            <el-col class="leftTop">
              <!--表格左上 小区信息等-->
              <el-row class="mod">
                <!--标题栏-->
                <el-row class="biaotikuang">
                  <span class="biaoti">小区信息</span>
                </el-row>
                <!--信息栏-->
                <el-row>
                  <!--楼宇-->
                  <el-col class="topMod">
                    <el-col style="width: 50%">
                      <div class="card-tuxing icon-color">
                        <svg-icon icon-class="building" class-name="card-panel-icon" />
                      </div>
                    </el-col>
                    <el-col class="shujukuang">
                      <el-row class="shuju">
                        <span>{{this.build}}</span>
                      </el-row>
                      <el-row>
                        <span class="name">楼宇</span>
                      </el-row>
                    </el-col>
                  </el-col>
                  <!--房屋-->
                  <el-col class="topMod">
                    <el-col style="width: 50%">
                      <div class="card-tuxing icon-color">
                        <svg-icon icon-class="房屋" class-name="card-panel-icon" />
                      </div>
                    </el-col>
                    <el-col class="shujukuang">
                      <el-row class="shuju">
                        <span>{{this.room}}</span>
                      </el-row>
                      <el-row>
                        <span class="name">房屋</span>
                      </el-row>
                    </el-col>
                  </el-col>
                  <!--商铺-->
                  <el-col class="topMod">
                    <el-col style="width: 50%">
                      <div class="card-tuxing icon-color">
                        <svg-icon icon-class="商铺" class-name="card-panel-icon" />
                      </div>
                    </el-col>
                    <el-col class="shujukuang">
                      <el-row class="shuju">
<!--                        <span>{{this.mer}}</span>-->
                        <span>2326</span>
                      </el-row>
                      <el-row>
                        <span class="name">商铺</span>
                      </el-row>
                    </el-col>
                  </el-col>
                  <!--车位-->
                  <el-col class="topMod">
                    <el-col style="width: 50%">
                      <div class="card-tuxing icon-color">
                        <svg-icon icon-class="停车位" class-name="card-panel-icon" />
                      </div>
                    </el-col>
                    <el-col class="shujukuang">
                      <el-row class="shuju">
<!--                        <span>{{this.car}}</span>-->
                        <span>3210</span>
                      </el-row>
                      <el-row>
                        <span class="name">车位</span>
                      </el-row>
                    </el-col>
                  </el-col>
                </el-row>
              </el-row>
              <div style="margin-top: -20px">
                <el-divider></el-divider>
              </div>
              <!--表格左中 统计-->
              <el-row class="mod">
                <el-col class="leftButtonOne">
                  <el-col style="width: 70%">
                    <el-row class="xiaobiaotikuang">
                      <span class="biaoti">住户登记</span>
                    </el-row>
                    <el-row>
                      <div class="card-xiaotuxing icon-color">
                        <svg-icon icon-class="登记处" class-name="card-panel-icon" />
                      </div>
                    </el-row>
                  </el-col>
                  <el-col class="shujukuang">
                    <span>{{this.userBang}}</span><span class="ziti">人</span>
                  </el-col>
                </el-col>
                <el-col class="leftButtonOne">
                  <el-col style="width: 70%">
                    <el-row class="xiaobiaotikuang">
                      <span class="biaoti">小区车辆</span>
                    </el-row>
                    <el-row>
                      <div class="card-xiaotuxing icon-color">
                        <svg-icon icon-class="汽车 (2)" class-name="card-panel-icon" />
                      </div>
                    </el-row>
                  </el-col>
                  <el-col class="shujukuang">
                    <span>6120</span><span class="ziti">台</span>
                  </el-col>
                </el-col>
              </el-row>
            </el-col>
            <!--表格右上 业主报修-->
            <el-col class="rightTop">
              <!--标题栏-->
              <el-row class="biaotikuang">
                <span class="biaoti">业主反馈</span>
              </el-row>
              <el-row>
                <el-col style="width: 50%;margin-left: 5%">暂无业主反馈</el-col>
<!--                <el-col style="width: 20%;margin-left: 20%;color: #888888">2024-2-26<br>9:25</el-col>-->
              </el-row>
            </el-col>
          </el-row>
          <!--表格下半部分-->
          <el-row class="buttonAll">
            <el-col class="buttonLeft">
              <!--标题栏-->
              <el-row class="biaotikuang">
                <span class="biaoti">报修统计</span>
              </el-row>
              <el-row>
                  <repair :loginCount=this.yichuli :createCount=this.weichuli></repair>
              </el-row>
            </el-col>
            <el-col class="buttonOne">
              <!--标题栏-->
              <el-row class="biaotikuang">
                <span class="biaoti">投诉统计</span>
              </el-row>
              <el-row style="margin-left: 140px;margin-top: 70px">
                暂无投诉数据
              </el-row>
            </el-col>
            <el-col class="buttonOne">
              <!--标题栏-->
              <el-row class="biaotikuang">
                <span class="biaoti">住户统计</span>
              </el-row>
              <el-row>
                <estateView :loginCount=this.userBang :createCount=this.room></estateView>
              </el-row>
            </el-col>
          </el-row>
          <bar-chart-order-count :titleData="dataCount.monthDay" :seriesData="dataCount.monthOrderCount"/>
        </div>
      </el-col>
      <!--      <el-col :xs="16" :sm="16" :lg="8">-->
      <!--        <div class="chart-wrapper">-->
      <!--          <p>订单分类统计（单位：单）</p>-->
      <!--          <bar-chart :titleData="dataCount.monthDay" :seriesData="dataCount.monthSaleMoney"/>-->
      <!--        </div>-->
      <!--      </el-col>-->
    </el-row>
  </el-row>
  <el-row v-else>
    <el-col>欢迎使用彩恒云物业管理管理平台</el-col>
  </el-row>
</template>

<script>

  import { getChartDataCount, } from "@/api/module/charts";

  import CountTo from 'vue-count-to'
  import PieChart from "./BarChartT";
  import BarChart from "./BarChart";
  import BarChartOrderCount from "./BarChartOrderCount";
  import OrderCount from "./OrderCount";
  import {userBangNum} from "@/api/module/estate/estateUserBang";
  import {getRoomNum} from "@/api/module/estate/room";
  import {listRecorNum} from "@/api/module/repairRecord";
  import {getBuildNum} from "@/api/module/estate/build"

  export default {
    components: {
      CountTo,
      // PanelGroupT,
      PieChart,
      BarChart,
      BarChartOrderCount,
      OrderCount,
      repair: () => import('@/views/dashboard/Echarts/repair.vue'),
      estateView: () => import('@/views/dashboard/Echarts/estateView.vue'),
    },
    data() {
      return {
        dataCount:{
          userAllCount:0,
          userNewCount:0,
          userNewCount7:0,
          fleaCount:0,
          repairCount:0,
          order7Count:0,
          orderTodayCount:0,
          orderYesTodayCount:0,
          orderMonthCount:0,
          todayMoney:0,
          todayFenRun:0,
          money7:0,
          userType:0,
          monthDay:[],
          monthSaleMoney:[],
          monthOrderCount:[],
          roleId:0,
          userTotalCount:10,
          todayLoginCount:4,
          todayCreateCount:6,
        },
        userBang:0,
        room:0,
        mer:0,
        car:0,
        yichuli:0,
        weichuli:0,
        build:0,
      }
    },
    created() {
      this.getRoomNmu();
      this.getUserBang();
      this.initData();
      this.getBaoxiu();
      this.getBuildNum();
    },
    methods: {
      getUserBang(){
        userBangNum().then(response=>{
          this.userBang = response;
        })
      },
      getRoomNmu(){
        getRoomNum().then(response=>{
          this.room = response;
        })
      },
      getBuildNum(){
        getBuildNum().then(response=>{
          this.build = response;
        })
      },
      getBaoxiu(){
        listRecorNum().then(response => {
          this.yichuli=response[0];
          this.weichuli=response[1];
        });
      },
      initData(){
        getChartDataCount().then(response => {
          this.dataCount = response.data;
          // console.log('this.dataCount.monthDay',this.dataCount.monthDay)
        });
      },
      handleSetLineChartData(type) {
        // this.$emit('handleSetLineChartData', type)
        var user = this.$store.state.user;
        console.log(user);
        var url = "";
        switch (type) {
          case "allVisitis": url = "/user/wxuser";break;
          case "newVisitis": url = "/user/wxuser";break;
          case "commonInfo": url = "/property/flea";break;
          case "repairCount": url = "/customer/repair";break;
          case "todayOrder": url = "/orders/list";break;
          case "sevenDayOrder": url = "/orders/list";break;
          case "todayMoney": url = "/orders/list";break;
          case "sevenDayMoney": url = "";break;
          case "xunjian":url = "/event/check/plan";break;
          case "baoxiu":url = "/customer/repair";break;
          case "jiaofei":url = "/orders/property";break;
          case "xianxia":url = "/property/estate/rooms";break;
          case "tongzhi":url = "/property/notice";break;
          case "user":url= "/user/user";break;
          case "lvhua":url = "/event/eliminator/plan";break;
        }
        if(url!==""){
          this.$router.push({ path: url }).catch(()=>{});
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .biaotikuang{
    width: 100%;
    height: 35px;
    margin-top: 10px;
    .biaoti {
      margin-left: 15px;
      margin-top: 0px;
      font-size:20px
    }
  }
  .topAll{
    width: 100%;
    height: 250px;
    .leftTop {
      height: 250px;
      background-color: #eeeeee;
      border-radius: 10px;
      width: 66.5%;
      .mod{
        width: 100%;
        height: 125px;
        .topMod {
          width: 25%;
          height: 80px;
          .shujukuang{
            width: 30%;
            margin-left: 20px;
            .shuju{
              margin-top: 10px;
              font-size: 25px;
            }
            .name{
              font-size: 15px;
              color: #888888;
            }
          }
        }
      }
      .leftButtonOne{
        width: 50%;
        height: 90px;
        .shujukuang{
          width: 30%;
          margin-top: 30px;
          font-size: 30px;
          .ziti{
            font-size: 20px
          }
        }
      }
      .xiaobiaotikuang {
        width: 100%;
        height: 25px;
        margin-top: 10px;
        .biaoti {
          margin-left: 50px;
          font-size:20px
        }
      }
      .icon-color {
        color: #FFA20A;
      }
      .card-tuxing {
        float: left;
        margin: -10px 10px 0 25px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
        .card-panel-icon {
          float: left;
          font-size: 60px;
        }
      }

      .card-xiaotuxing{
        float: left;
        margin: -15px 10px 0px 50px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
        .card-panel-icon {
          float: left;
          font-size: 40px;
        }
      }
    }
    .rightTop {
      width: 33%;
      height: 250px;
      background-color: #eeeeee;
      margin-left: 0.5%;
      border-radius: 10px;
    }
  }
  .buttonAll{
    width: 100%;
    height: 250px;
    margin-top: 5px;
    .buttonOne {
      width: 33%;
      height: 250px;
      background-color: #eeeeee;
      margin-left: 0.5%;
      border-radius: 10px;
    }
    .buttonLeft {
      width: 33%;
      height: 250px;
      background-color: #eeeeee;
      border-radius: 10px;
    }
  }
  .dashboard-editor-container {
    padding: 18px 22px 22px 22px;
    background-color: rgb(240, 242, 245);

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
      height: 600px;
    }
  }


  .panel-group {
    margin-top: 10px;

    .card-panel-col {
      margin-bottom: 10px;
    }

    .card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);

      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }

        .icon-people {
          background: #1dbaff;
        }

        .icon-message {
          background: #1dbaff;
        }

        .icon-money {
          background: #1dbaff;
        }

        .icon-shopping {
          background: #1dbaff;
        }
      }

      .icon-people {
        color: #1dbaff;
      }

      .icon-message {
        color: #1dbaff;
      }

      .icon-money {
        color: #1dbaff;
      }

      .icon-shopping {
        color: #1dbaff;
      }

      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }

      .card-panel-icon {
        float: left;
        font-size: 48px;
      }

      .card-panel-description {
        float: right;
        font-weight: bold;
        margin: 26px;
        margin-left: 0px;

        .card-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }

        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }

  .panel-group1 {
    .card-panel-col {
      margin-bottom: 10px;
    }
    .waibiankuang{
      margin-top: 30px;
      height:180px;
      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }

        .icon-people {
          background: #1dbaff;
        }

        .icon-message {
          background: #1dbaff;
        }

        .icon-money {
          background: #1dbaff;
        }

        .icon-shopping {
          background: #1dbaff;
        }
      }
      .font-cool {
        color: #000;
        font-size: 20px;
      }
      .icon-people {
        color: #1dbaff;
      }

      .icon-message {
        color: #1dbaff;
      }

      .icon-money {
        color: #1dbaff;
      }

      .icon-shopping {
        color: #1dbaff;
      }

      .card-panel-icon-wrapper {
        float: left;
        margin: 10px 0 0 30px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
        position:absolute;
      }

      .card-panel-icon {
        float: left;
        font-size: 80px;
        margin-bottom: 30px;
      }

      .card-panel-description {
        float: right;
        font-weight: bold;
        margin: 26px;
        margin-left: 0px;

        .card-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }

        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }



  @media (max-width:550px) {
    .card-panel-description {
      display: none;
    }

    .card-panel-icon-wrapper {
      float: none !important;
      width: 100%;
      height: 100%;
      margin: 0 !important;

      .svg-icon {
        display: block;
        margin: 14px auto !important;
        float: none !important;
      }
    }
  }
</style>
